<template>
  <div class="container">
    <div class="nav">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/control' }">主页</el-breadcrumb-item>
        <el-breadcrumb-item>商铺管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="search">
      <h3>筛选条件</h3>
      <div class="search-details">
        <el-button type="danger" size="small">全部删除</el-button>
        <label>
          <span>搜索：</span>
          <el-input v-model="search.name" placeholder="请输入店铺名称" clearable size="small"></el-input>
        </label>
        <el-button class="float-right" size="small" @click="add('add')">新增</el-button>
      </div>
    </div>
    <hr>
    <el-config-provider :locale="zhCn" class="list">
      <el-table :data="pagesData" style="width: 100%" max-height="500px" @selection-change="changeId">
        <el-table-column type="selection" width="55" v-model="ids" />
        <el-table-column prop="name" label="店铺名称" width="271"></el-table-column>
        <el-table-column prop="num" label="商品数量" width="150"></el-table-column>
        <el-table-column prop="describe" label="描述相符评分" width="200"></el-table-column>
        <el-table-column prop="attitude" label="服务态度评分" width="200"></el-table-column>
        <el-table-column prop="speed" label="发货速度评分" width="200"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" size="small" @click="add('edit', scope.row)">修改</el-button>
            <el-button type="danger" size="small" @click="delproduct([scope.row.id])">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-config-provider>
    <div class="page">
      <el-config-provider :locale="zhCn">
        <el-pagination v-model:current-page="pages.current" :page-sizes="[5, 10, 15, 20]" layout="total,sizes,prev, pager, next"
          :total="pages.pagetotal" v-model:page-size="pages.pagesize" />
      </el-config-provider>
    </div>
    <el-dialog v-model="visible" width="400px" @close="close()">
      <template #header>
        <div class="my-header">
          <h4>{{ filed === "add" ? "新增商品信息" : "修改商品信息" }}</h4>
          <el-form :rules="rules" :model="info" ref="formrules" label-width="150px">
            <el-form-item label="店铺名称：" prop="name">
              <el-input class="input" v-model="info.name" placeholder="请输入店铺名称" clearable size="small">
              </el-input>
            </el-form-item>
            <el-form-item label="商品数量：" prop="num">
              <el-input-number v-model="info.num" :min="0" @change="handleChange" />
            </el-form-item>
            <el-form-item label="描述相符评分：" prop="describe">
              <el-input-number v-model="info.describe" :min="0" :max="5.0" :precision="1" :step="0.1" />
            </el-form-item>
            <el-form-item label="服务态度评分：" prop="attitude">
              <el-input-number v-model="info.attitude" :min="0" :max="5.0" :precision="1" :step="0.1" />
            </el-form-item>
            <el-form-item label="发货速度评分：" prop="speed">
              <el-input-number v-model="info.speed" :min="0" :max="5.0" :precision="1" :step="0.1" />
            </el-form-item>
          </el-form>
          <div class="btn">
            <el-button type="success" @click="changeProduct(formrules)">确定</el-button>
          </div>
        </div>
      </template>
    </el-dialog>

    <el-dialog v-model="dialogVisible" title="Tips" width="30%" :before-close="handleClose">
      <span>确定删除该商品信息吗?</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="ConfirmDelete"> 删除 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
    
<script setup>
import { computed, ref } from "vue";
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
import { Plus } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import http from "../tools/axios";
const product = ref([
  {
    id: 1,
    name: " 电器",
    num: '32',
    describe: '4.5',
    attitude: '4.8',
    speed: '4.9'
  },
  {
    id: 2,
    name: " 电器",
    num: '32',
    describe: '4.5',
    attitude: '4.8',
    speed: '4.9'
  },
  {
    id: 3,
    name: " 电器",
    num: '32',
    describe: '4.5',
    attitude: '4.8',
    speed: '4.9'
  },
  {
    id: 4,
    name: " 电器",
    num: '32',
    describe: '4.5',
    attitude: '4.8',
    speed: '4.9'
  },
  {
    id: 5,
    name: " 电器",
    num: '32',
    describe: '4.5',
    attitude: '4.8',
    speed: '4.9'
  },
  {
    id: 6,
    name: " 电器",
    num: '32',
    describe: '4.5',
    attitude: '4.8',
    speed: '4.9'
  },
  {
    id: 7,
    name: " 电器",
    num: '32',
    describe: '4.5',
    attitude: '4.8',
    speed: '4.9'
  },
  {
    id: 8,
    name: " 零食",
    num: '32',
    describe: '4.5',
    attitude: '4.8',
    speed: '4.9'
  },
]);

const dialogVisible = ref(false);
const handleClose = () => {
  ElMessageBox.confirm("Are you sure to close this dialog?")
    .then(() => { })
    .catch(() => {
      // catch error
      dialogVisible.value = false;
    });
};
const ConfirmDelete = () => {
  dialogVisible.value = false;
  // 删除接口
  // http.post('/',)
};
const catelist = ref([
  { id: 1, title: "电器" },
  { id: 2, title: "食品" },
  { id: 3, title: "餐具" },
  { id: 4, title: "洗涤剂" },
]);

const pages = ref({ current: 1, pagesize: 10, pagetotal: product.value.length });
const getmsg = () => {
  http.get("/user/user").then((res) => {
    // product.value = res.data
    console.log(res);
  });
};
getmsg();
const search = ref({ name: "", category: "" });
const searchData = computed(() => {
  let arr = product.value.filter((item) => {
    return (
      item.name.includes(search.value.name) &&
      (search.value.category ? item.pid === search.value.category : true)
    );
  });

  return JSON.parse(JSON.stringify(arr)).map((item) => {
    for (var i = 0; i < catelist.value.length; i++) {
      if (catelist.value[i].id === item.pid) {
        item.pid = catelist.value[i].title;
      }
    }
    return item;
  });
});
const pagesData = computed(() => {
  pages.value.pagetotal = searchData.value.length;
  const start = (pages.value.current - 1) * pages.value.pagesize;
  const end = pages.value.current * pages.value.pagesize;
  return searchData.value.slice(start, end);
});
const ids = ref([]);
const changeId = (value) => {
  ids.value = value.map((item) => {
    return item.id;
  });
  console.log(ids.value);
};
const delproduct = (id) => {
  dialogVisible.value = true;
};
const info = ref({});
const visible = ref(null);
const rules = ref({
  name: [{ required: true, message: "请输入店铺名称", trigger: "blur" }],
});
const formrules = ref(null);
const filed = ref("add");
const add = (str, obj) => {
  visible.value = true;
  filed.value = str;
  if (obj) {
    info.value = { ...obj };
  }
};
const close = () => {
  info.value = {};
};
const changeProduct = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid, fields) => {
    if (valid) {
      if (filed.value === "add") {
        info.value.id = Date.now();
        product.value.unshift(info.value);

        // 新增接口
        http.post("/product/test", info.value).then((res) => {
          console.log(res);
          if (res.code === 0) {
            // 成功新增 刷新数据
            // this.$router.go(0)
            // 调用查询接口
            ElMessage({
              showClose: true,
              message: "添加成功",
              type: "success",
            });
          }
        });
      } else {
        product.value = product.value.map((item) => {
          if (item.id === info.value.id) {
            console.log(info.value);
            item = info.value;
          }
          return item;
        });
        // 调用修改接口
        http.post("/product/test", info.value).then((res) => {
          console.log(res);
          if (res.code === 0) {
            // 成功新增 刷新数据
            // this.$router.go(0)
            // 调用查询接口
            ElMessage({
              showClose: true,
              message: "修改成功",
              type: "success",
            });
          }
        });
      }
      visible.value = false;
    } else {
      ElMessage({
        showClose: true,
        message: "请补全信息重新添加",
        type: "warning",
      });
    }
  });
};
const num = ref(1);
const handleChange = (value) => {
  console.log(value);
};
</script>
    
<style scoped>
.search-details {
  display: flex;
}

.float-right {
  margin-left: calc(100% - 500px);
}

.search-details label {
  margin-left: 30px;
  color: #999;
}

label .el-input,
label .el-select {
  margin-left: 10px;
  width: 200px;
}

label .el-select {
  margin-right: 30px;
}

.list .pic {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page {
  display: flex;
  justify-content: end;
  margin: 20px 0;
}

.avatar-uploader {
  border: 1px solid #999;
  border-radius: 6px;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.btn {
  display: flex;
  justify-content: center;
}
</style>